<template>
  <div>
    <el-form :model="addData" :inline="true" ref="ruleForm" label-width="300px" class="demo-ruleForm">
      <el-form-item label="">
        <el-upload :headers="headers" class="upload-demo" :action="config + '/file/upload'" :limit="10" ref="aaaaa"
          :on-exceed="handleExceed" :before-upload="beforeAvatarUpload" :before-remove="beforeRemove"
          :on-preview="handlePreview" :on-success="fileSuc" :file-list="fileLists" :on-remove="onRemove" multiple>
          <!--  :name="file" -->
          <el-button size="medium" type="primary">选择文件<i class="el-icon-upload"></i></el-button>
        </el-upload>
        <el-table class="tableStyle" ref="multipleTable" :data="tableData" border tooltip-effect="dark"
          style="width: 650px">
          <el-table-column label="文件名" prop="name" align="center">
          </el-table-column>
          <el-table-column label="文件大小" prop="name" align="center">
          </el-table-column>
          <el-table-column label="上传时间" prop="name" align="center">
          </el-table-column>
          <el-table-column label="上传人" prop="name" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <div class="table_top">
                <el-button class="btn" type="text" @click="look(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "MunicipalDoctor30Fileupload",
  props: ["addData"],
  data() {
    return {
      uploadVisible: false,
      config: "http://122.224.240.2:2257/api",
    };
  },

  mounted() {
    console.log(this.addData);
  },
  computed: {
    headers() {
      return {
        token: sessionStorage.getItem('token')
      }
    },
    api() {
      return this.$config.host
    },
    hideUpload() {
      return this.imageUrl.length >= this.limit
    },
  },
  methods: {
    // 附件按钮
    upload(row) {
      this.uploadVisible = true;
      // this.$refs.aaaaa.clearFiles()
      // console.log(row);
      this.businessUuid = row.trainMaterialUuid;
      // console.log(this.businessUuid);
      let data = {
        businessUuid: row.trainMaterialUuid,
      };
      console.log(data);
      this.sendPost("/file/getFileByObj", data).then((res) => {
        if (res.errcode === 0) {
          console.log(res.data.list);
          if (res.data.list.length === 0) {
            console.log(res.data.list.length);
            this.fileLists = res.data.list;
          } else if (res.data.list.length === 1) {
            console.log(res.data.list.length);
            this.fileLists = res.data.list;
            this.fileLists[0].name = res.data.list[0].fileName;
            console.log(this.fileLists);
          } else if (res.data.list.length === 2) {
            this.fileLists = res.data.list;
            this.fileLists[0].name = res.data.list[0].fileName;
            this.fileLists[1].name = res.data.list[1].fileName;
          } else if (res.data.list.length === 3) {
            this.fileLists = res.data.list;
            this.fileLists[0].name = res.data.list[0].fileName;
            this.fileLists[1].name = res.data.list[1].fileName;
            this.fileLists[2].name = res.data.list[2].fileName;
            // console.log(this.fileLists);
          } else if (res.data.list.length === 4) {
            this.fileLists = res.data.list;
            this.fileLists[0].name = res.data.list[0].fileName;
            this.fileLists[1].name = res.data.list[1].fileName;
            this.fileLists[2].name = res.data.list[2].fileName;
            this.fileLists[3].name = res.data.list[3].fileName;
            // console.log(this.fileLists);
          } else if (res.data.list.length === 5) {
            this.fileLists = res.data.list;
            this.fileLists[0].name = res.data.list[0].fileName;
            this.fileLists[1].name = res.data.list[1].fileName;
            this.fileLists[2].name = res.data.list[2].fileName;
            this.fileLists[3].name = res.data.list[3].fileName;
            this.fileLists[4].name = res.data.list[4].fileName;
            // console.log(this.fileLists);
          } else if (res.data.list.length === 6) {
            this.fileLists = res.data.list;
            this.fileLists[0].name = res.data.list[0].fileName;
            this.fileLists[1].name = res.data.list[1].fileName;
            this.fileLists[2].name = res.data.list[2].fileName;
            this.fileLists[3].name = res.data.list[3].fileName;
            this.fileLists[4].name = res.data.list[4].fileName;
            this.fileLists[5].name = res.data.list[5].fileName;
            // console.log(this.fileLists);
          } else if (res.data.list.length === 7) {
            this.fileLists = res.data.list;
            this.fileLists[0].name = res.data.list[0].fileName;
            this.fileLists[1].name = res.data.list[1].fileName;
            this.fileLists[2].name = res.data.list[2].fileName;
            this.fileLists[3].name = res.data.list[3].fileName;
            this.fileLists[4].name = res.data.list[4].fileName;
            this.fileLists[5].name = res.data.list[5].fileName;
            this.fileLists[6].name = res.data.list[6].fileName;
            // console.log(this.fileLists);
          } else if (res.data.list.length === 8) {
            this.fileLists = res.data.list;
            this.fileLists[0].name = res.data.list[0].fileName;
            this.fileLists[1].name = res.data.list[1].fileName;
            this.fileLists[2].name = res.data.list[2].fileName;
            this.fileLists[3].name = res.data.list[3].fileName;
            this.fileLists[4].name = res.data.list[4].fileName;
            this.fileLists[5].name = res.data.list[5].fileName;
            this.fileLists[6].name = res.data.list[6].fileName;
            this.fileLists[7].name = res.data.list[7].fileName;
            // console.log(this.fileLists);
          } else if (res.data.list.length === 9) {
            this.fileLists = res.data.list;
            this.fileLists[0].name = res.data.list[0].fileName;
            this.fileLists[1].name = res.data.list[1].fileName;
            this.fileLists[2].name = res.data.list[2].fileName;
            this.fileLists[3].name = res.data.list[3].fileName;
            this.fileLists[4].name = res.data.list[4].fileName;
            this.fileLists[5].name = res.data.list[5].fileName;
            this.fileLists[6].name = res.data.list[6].fileName;
            this.fileLists[7].name = res.data.list[7].fileName;
            this.fileLists[8].name = res.data.list[8].fileName;
            // console.log(this.fileLists);
          } else if (res.data.list.length === 10) {
            this.fileLists = res.data.list;
            this.fileLists[0].name = res.data.list[0].fileName;
            this.fileLists[1].name = res.data.list[1].fileName;
            this.fileLists[2].name = res.data.list[2].fileName;
            this.fileLists[3].name = res.data.list[3].fileName;
            this.fileLists[4].name = res.data.list[4].fileName;
            this.fileLists[5].name = res.data.list[5].fileName;
            this.fileLists[6].name = res.data.list[6].fileName;
            this.fileLists[7].name = res.data.list[7].fileName;
            this.fileLists[8].name = res.data.list[8].fileName;
            this.fileLists[9].name = res.data.list[9].fileName;
            // console.log(this.fileLists);
          } else {
            console.log("无数据");
          }
        } else {
          this.err({ message: res.errmsg });
        }
      });
    },

    // 上传成功时
    fileSuc(event, file, fileList) {
      // console.log(fileList);
      // console.log(file.response.data);
      this.fileSuccess = file.response.data;

      console.log(this.fileSuccess);
      console.log(this.businessUuid);
      let data = {
        ...this.fileSuccess,
        businessUuid: this.businessUuid,
      };
      console.log(data);
      this.sendPost("/file/insertFile", data).then((res) => {
        if (res.errcode === 0) {
          this.suc({ message: res.errmsg });
          console.log(res);
        } else {
          // ElMessage('上传文件过大')
          this.err({ message: res.errmsg });
        }
      });
    },
    //上传之前
    beforeAvatarUpload(file) {
      console.log(file);
      const isLt2M = file.size / 1024 / 1024 < 100;
      console.log(isLt2M);
      if (!isLt2M) {
        // this.$message.error('上传图片大小不能超过 100MB!');
        // this.uploadVisible = false;
        ElMessageBox.alert(
          "上传图片大小不能超过 100MB!----------请刷新",
          "提示",
          {
            confirmButtonText: "OK",
            callback: (action) => {
              this.uploadVisible = false;
              this.fileSuc(event, file, fileList);
              // this.click(0);
              // ElMessage({
              //   type: 'info',
              //   message: `action: ${action}`,
              // })
            },
          }
        );
      }
      // this.click(0);
      // return isLt2M;
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log(file);
      if (file.response) {
        window.open(file.response.data.urlPath);
      } else {
        window.open(file.urlPath);
      }
    },
    // 上传数量
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    // 删除文件之前
    beforeRemove(file, fileList) {
      console.log(file);
      // console.log(file.response.data.businessUuid);
      console.log(file.businessUuid);
      if (file.businessUuid) {
        console.log("有");
        return this.$confirm(`确定移除 ${file.name}？`);
      } else {
        console.log("无");
        // alert("请退出附件上传，重新进入删除该附件")
        ElMessageBox.alert("请退出附件上传，重新进入后删除该附件", "提示", {
          confirmButtonText: "OK",
          callback: (action) => {
            this.uploadVisible = false;
            // ElMessage({
            //   type: 'info',
            //   message: `action: ${action}`,
            // })
          },
        });
        return false;
      }
    },
    // 删除文件
    onRemove(file, fileList) {
      console.log(file);
      let data = {
        ...file,
      };
      this.sendGet("/file/delete", data).then((res) => {
        if (res.errcode === 0) {
          console.log(res);
          this.suc({ message: res.errmsg });
        } else {
          this.err({ message: res.errmsg });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.upload-demo {
  margin: 0px 20px 20px 40px;
}
</style>